import React, { memo, useCallback, useEffect } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { useHistory } from "react-router-dom"


import GHThemeHeaderRCM from "@/components/thenme-header-rcm";
import GhThemeCover from "@/components/theme-cover"
import { getRecommend } from "../../store/actionCreators";
import { RecommendWrapper } from './style'
export default memo(function GHHotRecommend() {
  const routeHistory = useHistory()
  const dispatch = useDispatch()

  const keywordClick = useCallback((keyword) => {
    routeHistory.push({ pathname: "/discover/songs", cat: keyword })
  }, [routeHistory])

  useEffect(() => {
    dispatch(getRecommend())
  }, [dispatch])

  const state = useSelector(state => ({
    list: state.getIn(['recommend', 'hotRecommend'])
  }), shallowEqual)

  return (
    <RecommendWrapper>
      <GHThemeHeaderRCM
        title="热门推荐"
        keywords={["华语", "流行", "摇滚", "民谣", "电子"]}
        moreLink="/discover/songs"
        keywordClick={keywordClick} />
      <div className="recommend-list">
        {
          state.list.slice(0, 8).map((item, index) => {
            return (
              <GhThemeCover info={item} key={item.id} />
            )
          })
        }
      </div>
    </RecommendWrapper>
  )
})